<!DOCTYPE html>
<html>
  <head>
    <title>jQuery .hover() Example</title>
    <link rel="stylesheet" type="text/css" href="../styles/core.css"/>
    <script type="text/javascript" src="../scripts/jquery-1.4.js"></script>
    <script type="text/javascript" src="../scripts/jqia2.support.js"></script>
    <script type="text/javascript">
      function report(event) {
        say(event.type+' on ' + event.target.id);
      }

      $(function(){
        $('#outer1').bind('mouseover mouseout',report);
        $('#inner1').bind('mouseover mouseout',report);
        $('#outer2').hover(report);
        $('#inner2').hover(report);
      });
    </script>

    <style type="text/css">
      .outer {
        position: relative;
        width: 220px;
        height: 96px;
        border: solid 1px black;
        background-color: lightseagreen;
      }

      .inner {
        position: absolute;
        top: 28px;
        left: 28px;
        right: 28px;
        bottom: 28px;
        border: solid 1px black;
        background-color: khaki;
      }

      #outer2 {
        margin-top: 24px;
      }
    </style>
  </head>

  <body>
    <div class="outer" id="outer1">
      Outer 1
      <div class="inner" id="inner1">Inner 1</div>
    </div>
    <div class="outer" id="outer2">
      Outer 2
      <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>
  </body>
</html>
